<template>
	<view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-text-center content-desc-item u-padding-top-20 u-font-24" v-if="dataList.length>0">本榜单现仅统计本平台数据</view>
			<view class="u-padding-top-32 issue-ranking">
				<!-- <view class="u-flex u-margin-bottom-32 u-col-bottom" v-if="rankingWinnerList.length>1">
					<view v-for="(data,index) in rankingWinnerList " :key="index"
						class=" u-text-center u-position-relative ranking-king"
						:class="[{'fanpai':index!=1},{'fanOne':index==1},{'fanTwo':index==0},{'fanThree':index==2}]"
						@click="detail(data)">
						<view class="u-margin-top-30">
							<u-icon name="huangguan" custom-prefix="custom-icon" :color="iconColor(index)" size="38">
							</u-icon>
						</view>
						<view class="acvter u-flex u-row-center">
							<item-image type="1" :img="data.avatar" :size="index!==1?75:100"></item-image>
						</view>
						<view class="u-font-28 text-order-time">{{data.nickname}}</view>
						<view class="u-flex u-row-center u-margin-top-32 u-margin-bottom-14">
							<image-number :number="data.total" type="@2x"></image-number>
							<view class="u-margin-left-20">
								<trend :trend="data.trend"></trend>
							</view>
						</view>
						<view class="u-font-24 u-margin-top-10 color-grey">势力值</view>
					</view>
				</view> 
				<view v-if="rankingWinnerList.length===1" class=" u-text-center fanOne  once"
					@click="detail(rankingWinnerList[0])">
					<view class="u-padding-top-30">
						<u-icon name="huangguan" custom-prefix="custom-icon" :color="iconColor(1)" size="38"></u-icon>
					</view>
					<view class="acvter u-flex u-row-center">
						<item-image type="1" :img="rankingWinnerList[0].avatar" :size="100"></item-image>
					</view>
					<view class="u-font-28 text-order-time">{{rankingWinnerList[0].nickname}}</view>
					<view class="u-flex u-row-center u-margin-top-32 u-margin-bottom-14">
						<image-number :number="rankingWinnerList[0].total" type="@2x"></image-number>
						<view class="u-margin-left-20">
							<trend :trend="rankingWinnerList[0].trend"></trend>
						</view>
					</view>
					<view class="u-font-24 u-margin-top-10 color-grey">势力值</view>
				</view>
				-->
				<view class="u-padding-left-32 u-padding-right-32 ">
					<rank-king :winnerList="rankingWinnerList" @detail="detail"></rank-king>
					<template v-for="(data,index) in dataList" >
						<view :key="index" v-if="index>2" class="u-margin-bottom-20"
						@click="detail(data)">
						<item-box>
							<view class="u-flex u-row-between u-padding-30">
								<view class="u-flex">
									<view class=" u-margin-right-35">
										<image-number :number="data.presentLocation"></image-number>
									</view>
									<item-image type="1" :img="data.avatar" :size="80" />
									<view class="u-margin-left-16">
										<text class="content-desc-item u-font-28">{{data.nickname}}</text>
										<view class="u-flex" v-if="type!='issue'">
											<star :score="data.score"></star>
											<text
												class="u-font-20 text-color-B0B2D8 u-margin-left-34">{{data.evaluateNum}}条</text>
										</view>
									</view>
								</view>
								<view class="u-flex u-margin-right-30">
									<trend :trend="data.trend"></trend>
									<text class="text-color-txtTheme u-font-28 u-margin-left-10">
										{{data.total}}
									</text>
								</view>
							</view>
						</item-box>
					</view>
					</template>
				</view>
				
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import trend from './trend.vue'
	import star from '@/components/star/star.vue'
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	import rankKing from '@/pagesA/acomponents/rankKing/rankKing.vue'
	export default {
		name: "issueRank",
		mixins: [upCallback],
		components: {
			trend,
			star,
			imageNumber,
			rankKing
		},
		data() {
			return {
				apiModule: 'shopApi',
				rankingWinnerList: [], //前三条数据
			}
		},
		props: {
			type: {
				type: String,
				default: "issue"
			}
		},
		computed: {
			apiType() {
				return this.type === 'issue' ? 'powerListIssue' : 'powerListDm'
			},
			name() {
				return this.type === 'issue' ? 'getPowerListByIssue' : 'getPowerListByDm'
			}
		},
		methods: {
			dataListCallBack({
				content
			}) {
				if (content.length > 0 && this.rankingWinnerList.length == 0) {
					this.rankingWinnerList = [content[1], content[0], content[2]].filter(val => val)
				}
			},
			detail(item) {
				const url = this.type === 'issue' ? '/pagesA/issueDetail/issueDetail' : '/pagesA/rankingList/DMdetail'
				this.$u.route({
					url: url,
					params: {
						uid: item.uid
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.fansList {
		width: 100%;
		height: 140rpx;
		border-radius: 26rpx;
		background: #1f1b34;
		padding-left: 22rpx;
		padding-right: 50rpx;
		margin-bottom: 16rpx;

		.fenshu {
			position: absolute;
			right: 59rpx;
			color: #fbfbfb;
		}
	}
</style>
